<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>登录</title>
    <link rel="stylesheet" type="text/css" href="css/logon.css" />
</head>

<body>
    <div id="logon_top">
        <img src="img/xiaologo.png">
        <span>依《网络安全法》相关要求，即日起蘑菇街会员登陆需绑定手机。为保障您的账户安全及正常使用，如您尚未绑定，请尽快完成绑定，感谢您的理解和支持!</span>
    </div>
    <div class="logon_bgImg">
        <div id="logon_cen">
            <div class="logon_wrap">
                <div class="wrap_top">
                    <div class="top_option">
                        <p class="option_one">
                            扫码登录
                        </p>
                        <p class="option_two">
                            账号密码登录
                        </p>
                        <!-- scan(扫描) option_scan为隐藏属性 -->
                        <dl class="option_scan">
                            <dt>打开APP-搜索-右下角扫一扫</dt>
                            <dd>
                                <img src="img/ma.png">
                            </dd>
                        </dl>
                        <p class="option_three option_scan">下载蘑菇街APP</p>
                        <!-- 账号密码登录 -->
                        <div class="option_account">
                            <input type="text" placeholder="账号/邮箱/手机号" id="username" />
                            <div class="account_verify">
                                <input type="text" placeholder="请输入密码" id="userpass" />
                            </div>
                            <button type="button" id="logon">登录</button>
                            <p class="account_forget">
                                <span>忘记密码</span>
                            </p>
                            <a href="#">手机号登录</a>
                        </div>

                        <!-- 手机号登录 -->
                        <!-- <div class="option_phone">
								<input type="text" placeholder="手机号"/>
								<div class="phone_verify">
									<input type="text" placeholder="验证码"/>
									<span>获取动态密码</span>
								</div>
								<button type="button">登录</button>
								<a href="#">账号密码登录</a>
							</div> -->
                    </div>
                </div>
                <div class="wrap_bottom">
                    <p>社交账号登录</p>
                    <dl>
                        <dt>
								<img src="img/wei.png">
							</dt>
                        <dd>微信登录</dd>
                    </dl>
                    <dl>
                        <dt>
								<img src="img/qq.png" >
							</dt>
                        <dd>QQ登录</dd>
                    </dl>
                </div>
            </div>
        </div>
    </div>
    <div id="logon_bottom">
        <ol class="logon_nav">
            <li>关于我们</li>
            <li>招聘信息</li>
            <li>联系我们</li>
            <li>商家入驻</li>
            <li>商家后台</li>
            <li>规划中心</li>
            <li>规划众议院</li>
            <li>有坏信息举报</li>
            <li>用户隐私保护</li>
        </ol>
        <div class="logon_below">
            <p class="logon_below_one">
                <span>©2020 Mogu.com 杭州卷瓜网络有限公司</span>
            </p>
            <ul class="logon_below_two">
                <li>营业执照：93478347836523829</li>
                <li>营业性演出许可证</li>
                <li>网络文化经济许可证</li>
                <li>网络信息服务信用承诺书</li>
                <li>进口冷链食品管理承诺书</li>
                <li>增值电信业务经营许可证：浙B2-20110349</li>
                <li>安全责任书</li>
            </ul>
            <ul class="logon_below_three">
                <li>
                    <img src="img/12.png" alt=""> 浙公网安备 34638643856号
                </li>
                <li>互联网药品信息服务资格证书编号：（浙）- 经营性-2018-0002</li>
                <li>浙网食A34565780</li>
                <li>出版物网络交易平台服务经营备案证</li>
                <li>（浙）网城平台备字【2018】第00006号</li>
            </ul>
        </div>
</body>
<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    $(".option_two").click(function() {
        $(".option_account").css({
            "display": "block"
        });
        $(".option_scan").css({
            "display": "none"
        });
        $(".option_two").css({
            "border-bottom": "3px solid #fe5f77"
        });
        $(".option_one").css({
            "border-bottom": "none"
        });
    })
    $(".option_one").click(function() {
        $(".option_account").css({
            "display": "none"
        });
        $(".option_scan").css({
            "display": "block"
        });
        $(".option_one").css({
            "border-bottom": "3px solid #fe5f77"
        });
        $(".option_two").css({
            "border-bottom": "none"
        });
    })

    //登录
    $("#logon").click(function() {

        let xhr = new XMLHttpRequest
        xhr.open("post", "./Lphp/login.php", true)
        xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
        //登录
        xhr.send(`username=${$("#username").val()}&userpass=${$("#userpass").val()}`)
            // console.log($("#username").val())
            // console.log($("#userpass").val())

        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4 && xhr.status == 200) {
                console.log(xhr.responseText)
                if (xhr.responseText == "success") {
                    //跳转
                    location.href = "http://127.0.0.1/project/Mogujie/shopping_mall.html"


                    //保存localStorage
                    localStorage.setItem("username", $("#username").val())
                    localStorage.setItem("userpass", $("#userpass").val())

                } else {
                    alert("登录失败，用户名或密码错误")
                }
            }
        }








    })
</script>

</html>